body{
	background:url(imagens/background.jpg); /*inserção da imagem de fundo em todo o site*/
	color:#573d30; /*color:#868686; cor padrão para todas as fontes*/length
	font-family: "Open Sans", Helvetica, sans-serif, arial; /*definição da fonte geral incorporada do Google Fonts*/
	font-size: 1.125em; /*font-size: 18px; tamanho da fonte padrão - 18px ÷ 16px = 1.125em */
	font-weight: 300; /*indica que a fonte está coonfigurada como Open Sans Light*/
	line-height: 22px;/*altura da linha*/
	text-align: left; /*alinhando o texto à esquerda*/
	text-shadow:1px 1px 0px #fff; /*sombreamento para as fontes do site*/
	background-color:#fcf5ef; /* Rosa claro padrão */
}

label {
	font-family: Arial, Helvetica, sans-serif;	
	padding: 5px 5px;
}

.componente {
	width: 50%;
}

.componente_dt {
	width: 130px;
}


.componente_area {
	align: center;
	width: 100%;
}

.label_tit {
	font-size: 16px;
	font-weight: bold;
	/*color:rgb(82,54,42);*/
	color:rgb(82,54,42);
}

.label_header {
	font-size: 14px;	
	color:rgb(82,54,42);
}

.label_footer {
	
	font-size: 10px;	
	color:rgb(82,54,42);
}

.label_footer_cor {
	font-size: 10px;	
	color:rgb(60, 160, 70);
}	

.label_relat_header {
	font-size: 10px;	
	color:rgb(82,54,42);
}

.label_relat {
	font-size: 10px;	
	color:rgb(82,54,42);
}

input[type="button"], input[type="submit"] {
	font-family: Arial, Helvetica, sans-serif;
	display: inline-block;
	
}

.button_menu {
	border:none;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	width: 170px;	
	padding: 5px 15px;
	color:#000000);
	background-color:rgb(240,240,240);	
		
}

.button_ent {
	border:none;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	width: 170px;	
	padding: 5px 15px;	
	color:#FFFFFF;
	background-color:rgb(86,96,30);	/*Verde Padrão*/
		transition: 0.4s;
			
}


.button_tbl {
	
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	width: 50%;	
	padding: 5px 15px;
	color:#000000);
	background-color:rgb(240,240,240);	
			
}

.button_sai {
	border:none;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	width: 170px;	
	padding: 5px 15px;	
	color:#FFFFFF;
	background-color:rgb(82,54,42);	/*Marrom Padrão*/
		transition: 0.4s;
		
}

.center{
	margin: 0 auto;  /*centralizando o conteúdo no navegador*/
	margin-top: 0px;
/*	width: 1200px; */ /*largura do layout*/	
	width: 100%; /*ajuste do layout à tela*/		
}

/*.clearfix usado para adicionar um espaço vazio antes e depois dos elementos
  evitando que os floats se aglomerem.
*/
.clearfix:before, .clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
/*fim do clearfix*/
img, picture, video, embed {
    max-width: 100%; /*define a largura máxima em até 100%*/
}
body {

}
h1, h2{
	color:#FE9380;
	font-size: 0px;
	font-weight: 800;
	letter-spacing: -3px; /*espaçamento entre as letras */
	line-height: 60px;
}
h3{
	font-size: 32px;
	font-weight: 300;
	letter-spacing: -2px; /*espaçamento entre as letras*/
	line-height: 38px;
}
p{
	font-size: 12px;
	font-weight: 300;/*modifica a força da fonte para light*/
	letter-spacing: -1px; /*espaçamento entre as letras*/
	line-height: 18px;
}
a, a:link, a:visited{
	color:#FE9380; /*cor dos links*/
	font-weight:400; /*modifica a força da fonte para semi-bold*/
	text-decoration:none; /*retira o sublinhado dos links*/
}
a:hover{
	color:#FE5E41;
	text-decoration:underline; /*inseri uma linha sob o link*/
	text-shadow:none; /*retira a sombra da fonte*/
}

header{	
	background-color: #ffffff;
	height:120px;	
	width:100%;
}
/*
=========================
logotipo
=========================
*/
	header h1 a{
//		background:url(ecgl_logo_4.jpg) no-repeat; /*logotipo normal da ecgl*/
		background:url(ecgl_logo_50H.png) no-repeat; /*logotipo 50 anos da ecgl*/
		display:block; /*torna o link como um bloco, um retângulo*/
		float:left; /*posiciona o logotipo à esquerda do site*/
        	height:130px; /*altura da imagem*/
		text-indent:-9999; /*recuo para ocultar texto à esquerda*/
		/* width:75.499999999999995%; /* 302px ÷ 1200px = 0.251666666666665 x 100 = 25.166666666666665%*/ /*padrao width:302px; largura da imagem*/
               width:58.333333333333%; /* 700px ÷ 1200px = 0.58333333333333 x 100 = 58.333333333333%*/


	}

/*
=========================
nav - menu de navegação
=========================
*/
nav{
	float:right; /*posiciona menu à direita*/
	margin-top:78px; /*distância do menu à margem superior do navegador*/
	text-align:right; /*alinha os links à direita*/
/* padrao	width:490px;*/
/*	width:40.83333333333333%;*/ /* 490px ÷ 1200px = 0.4083333333333333 x 100 = 40.83333333333333%*/
        width:41.6666666666667%; /* 500px ÷ 1200px = 0.416666666666667 x 100 = 41.6666666666667%*/
}
nav ul{
	list-style-type:none; /*retira os marcadores da lista*/
}
	nav li {
		display: inline; /*deixa o menu na horizontal*/
	}
		nav ul li a{
/*			margin-right: 30px;*/ /*espaço à direita de cada link do menu*/
			margin-right: 2.5%; /* 30px ÷ 1200px = 0.025 x 100 = 2.5%*/
		}
		        nav ul li:nth-child(5) a{
/*		               margin-right:0px; *//*indica que o 5º elemento da lista (contato) terá a margem direita zerada*/
			       margin-right:0; 
	        	}
                nav a:link, nav a:visited{
         	    color:#999;
/*	            font-size: 22px;*/
		    font-size: 1.2222222222em; /* 22px ÷ 18px = 1.2222222222em */
	            font-weight: 300;
/*	            letter-spacing: -2px;/* /*espaçamento entre as letras*/
		    letter-spacing: -0.0909090909em; /* -2px ÷ 22px = -0.0909090909em */
/*	            line-height: 26px;*/
		    line-height: 1.18181818182em; /* 26px ÷ 22px = 1.18181818182em */
	            display:inline-block;
                }
                nav a.ativo:link, nav a:hover{
                    color:#FE9380; /*indica a página ativa e o link:hover*/
                }

/*----------------------------------------------------------
Seção .CHAMADA <<<<<========================================
----------------------------------------------------------*/
.chamada{
	height:290px;
	text-align:center;
/* padrao	width:1200px;*/
	width:100%; /*1200px ÷ 1200px = 1 x 100 = 100%*/
}
	h2 span{
/*		font-size: 60px;
		font-weight: 300;
		letter-spacing: -2px;
		line-height: 60px;*/
		font-size: 1em; /* 60px ÷ 60px = 1em */
		font-weight: 300;
		letter-spacing: -0.0333333333em; /* -2px ÷ 60px = 0.0333333333em */
		line-height: 1em; /* 60px ÷ 60px = 1em */
	}
	.chamada h3 {
		margin: 0 auto;
/* padrao	width:900px; */
		width:75%; /* 900px ÷ 1200px = 0.75 x 100 = 75%*/
	}

/*----------------------------------------------------------
Seção .CONTAINER - Conteúdo com 3 colunas <<<<<=============
----------------------------------------------------------*/
.container_header:after, .container_header:before {
	float:left;
	height: absolute; 	
	padding:0.01em 16px;
	padding:0%; 
	width:100%; 		
	/*margin: 15px auto 0px auto; */
}

.container {
	float:left;
	height: absolute; 		
	padding:0%; 
	width:100%; 	
	
	/*max-width:1200px; */
	
	/*position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
	width:75%;*/
	
}
.desktop, .tablet, .mobile{
	margin:0 auto;

	position:relative; 
	text-align:center;
/*	width:360px;*/
/*	width:62.57894736842105%;*/ /* 360px ÷ 1140px = 0.3157894736842105 x 100 = 31.57894736842105%*/
        width:100%;
}

.mobile_header{
	float:center;
	position:relative; 
	text-align:center;
/*	width:360px;*/
/*	width:62.57894736842105%;*/ /* 360px ÷ 1140px = 0.3157894736842105 x 100 = 31.57894736842105%*/
        width:100%;	
}

.desktop, .tablet{
/*	margin-right: 30px;*/
	margin-right: 2.631578947368421%; /* 30px ÷ 1140px =  0.02631578947368421 x 100 = 2.631578947368421%*/
}
.mobile{
/*      background-color:#9C8CB9;*/
	
	background-color:#FFFFFF;
        width:90%;	

	

	
	
	
	
}
.desktop{
	/*background-color:#fcf5ef;*/
	background-color:#FFFFFF;
}
.tablet{
	/*background-color:#fcf5ef;*/
	background-color:#FFFFFF;
}

/*----------------------------------------------------------
Seção imagens
----------------------------------------------------------*/
/*imagens*/
#desktop img, #tablet img, #mobile img{
	margin: 10px auto -15px auto;
	text-align:center;
}

/*
=========================
figure - imagens
=========================
*/
/*.container figure{
	margin: 15px auto 0px auto; 
	width:69.44444444444444%; /* 250px ÷ 360px = 0.6944444444444 x 100 = 69.44444444444444%*/
}
*/
.container .desktop figure, .container .tablet figure, .container .mobile figure {
	margin: 15px auto 0px auto; 
	width:69.44444444444444%; /* 250px ÷ 360px = 0.6944444444444 x 100 = 69.44444444444444%*/
}

/*
=========================
formatação do texto
=========================
*/
.container h3{
/*	color:#fff;
	font-size: 32px;
	font-weight: 300;
	letter-spacing: -2px;
	margin-bottom: 30px;
	text-shadow:none; /*
	color:#fff;
	font-size: 1.77777777778em; /* 32px ÷ 18px = 1.77777777778em */
	font-weight: 300;
	letter-spacing: -0.0625em; /* -2px ÷ 32px = 0.0625em */
	margin-bottom: 30px;
	text-shadow:none;
}
.container p{
/*	background-color:#fff;
	float:left;
	height:160px;
	padding:7px;
	position:absolute;
	width-max:360px;
	text-align:justify;
	top:225px; 
*/
	background-color:#ffffff;
	float:left;
	height:160px;
	padding: 1%; /* 7px ÷ 360px =  0.019444444444444445 x 100 =  1.9444444444444445%*/
	position:absolute;
	width-max:100%; /* 360px ÷ 360px = 1 x 100 = 100%*/
	text-align:justify;
	top:225px;
}
/*
=========================
formatação do botão
=========================
*/
span.btn{
/*	font-size: 20px;
	font-weight: 400;
	letter-spacing: -2px;
	height:27px;
	margin-top: 30px;
	position:absolute;
	right: 1px;
	text-align:center;
	text-shadow:none;
	width:120px; 
*/
	font-size: 1.1111111111em; /* 20px ÷ 18px = 1.1111111111em */
	font-weight: 400;
	letter-spacing: -0.1em; /* -2px ÷ 20px = -0.1em */
	height:27px;
	margin-top: 30px;
	position:absolute;
	right: 1px;
	text-align:center;
	text-shadow:none;
	width:33.33333333333333%; /* 120px ÷ 360px = 0.3333333333333333 x 100 = 33.33333333333333%*/

}
span.btn a{
/*	color:#fff;
	padding: 2px 4px;
*/
	color:#fff;
	padding: 2px 3.333333333333333%; /* 4px ÷ 120px = 0.3333333333333333 x 100 = 3.333333333333333%*/
}
.desktop span.btn a{
	background-color:#FE9481;
}
.tablet span.btn a{
	background-color:#FCDA92;
}
.mobile span.btn a{
	background-color:#9C8CB9;
}

/*----------------------------------------------------------
Seção FOOTER - Rodape com 2 colunas &lt;&lt;&lt;&lt;&lt;===================
----------------------------------------------------------*/
footer{
	clear:both;
	height: 50px;
	padding: 10px 0;
/*	width:1200px;*/
	width:100%; /* 1200px ÷ 1200px = 1 x 100 = 100%*/
}
.copyright{
	float:left;
/*	margin-left:30px;*/
	margin-left: 2.5%; /* 30px ÷ 1200px = 0.025 x 100 = 2.5%*/
}
.desenvolvedor{
	float:right;
}
.desenvolvedor figure{
/*	width:182px;*/
	width:100%;
}

img {
    max-width: 100%; /*define a largura máxima em até 100%*/
}
	
table {
  border:1px ;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: auto;
}

table caption {
  font-size: 0.75em;
  margin: .5em 0.75em;
}

table tr {
  
  border:none;
  padding: .075em;
}


table th, td {
  border:none; 	  
  font-family: Arial, Helvetica, sans-serif;	
  padding: 2px 5px;

  font-size: .65em;
/*  padding: .310em;*/
  
  text-align: left;
}

.thr {
  border:none; 	  
  font-family: Arial, Helvetica, sans-serif;	
  padding: 5px 5px;

  font-size: .65em;
/*  padding: .310em;*/
  padding: .075em;
  text-align: right;
}


tr:nth-child(even) {background-color: #f2f2f2;}


 .tdL {
   border:none;	 
   font-size: .65em;
/*  padding: .310em;*/
   padding: .075em;
   text-align: left;
  }

.tdr {
  border:none;	
  font-size: .65em;
/*  padding: .310em;*/
  padding: .075em;
  text-align: right;
  }

table th {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media only screen and (max-width: 550px) {
	
	.container{
		float:left;
		height: absolute; 
		padding:2.5%; /* 30px ÷ 1200px = 0.025 x 100 = 2.5%*/
		width:95%; /* 1200px ÷ 1200px = 1 x 100 = 100% .:. 100% - 5.0% de padding (direita e esquerda) = 95%*/
		max-width:1200px;
	}	
	
  table {
    border:none;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border:none;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #573d30;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  .tdL {
    border:none;
    display: block;
    font-size: .8em;
    text-align: left;
  }

  .tdr {
    border:none;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border:none;
  }
}